<style scoped lang="scss">
	view {
		// display: flex;
		box-sizing: border-box;
	}

	.banner-image {
		width: 750rpx;
		height: 400rpx;
		margin: auto;
		// border-radius: 5px;
	}

	.ad-image {
		width: 750rpx;
		height: 200rpx;
		margin: 5px auto;
		border-radius: 5px;
	}

	.swiper-box {
		height: 400rpx;
	}

	.active {
		width: 750rpx;
		padding: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.u-box {
		display: flex;
		width: 100%;
		flex-direction: column;
		width: 50%;
		padding: 2px;
		box-sizing: border-box;
		background-color: #f9f9f9;
		border-radius: 5px;
	}

	.u-img {
		width: 100%;
		max-height: 360rpx;
	}

	.section {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx;
	}

	.s-title {
		width: 100%;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 700;
	}

	.s-body {
		display: flex;
		font-size: 12px;
		justify-content: space-between;
	}
	.gird {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px auto;
		padding: 15px 0 10px;
	}
	.box {
		min-width: 500rpx;
		max-width: 700rpx;
		min-height: 300rpx;
		color: #fff;
		// background-color: #fff;
		padding: 10px 5px;
		border-radius: 5px;
		max-height: 80vh;
		border-image-source: url("/static/bg_index.png");
		border-image-slice: 20 fill;
		// border-image-repeat:repeat;
		border-style: solid;
		border-width: 20px;
	}

	.close {
		position: absolute;
		bottom: -40px;
		left: calc(50% - 10px);
	}


	.color {
		color: #ffffff;
		background-color: #c33864;
		border-color: #c33864;
	}
	
</style>
<template>
	<view class="warp">
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner" :where="bwhere"
			orderby="sort">
			<image v-if="!(loading||data.length)" class="banner-image" src="/static/uni-center/headers.png"
				mode="aspectFill" :draggable="false" />

			<swiper v-else class="swiper-box" :autoplay="true" @change="changeSwiper" indicator-dots>
				<swiper-item v-for="(item, index) in data" :key="item._id">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image class="banner-image" :src="item.bannerfile" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</unicloud-db>

		<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner" :where="awhere"
			orderby="sort" getone="true">
			<template v-if="!loading && data?.bannerfile">
				<image class="ad-image" :src="data?.bannerfile" mode="aspectFill" :draggable="false" />
			</template>
		</unicloud-db>

		<!-- gird 图标 -->
		<uni-grid :column="3" v-if="isShow" :showBorder="false" :square="false">
			<uni-grid-item v-for="(item,index) in girdList" :key="index" >
				<view class="gird">
					<wolf-heart :bg-color="item.bgcolor" :text="item.text" :url="item.url"></wolf-heart>
				</view>
			</uni-grid-item>
			<!-- <uni-grid-item></uni-grid-item> -->
		</uni-grid>
		<!-- 猜你喜欢 -->
		<view
			style="display: flex;align-items: baseline;justify-content: space-between;margin-top: 15px;padding: 5px 10px;">
			<view style="font-size: 24px;font-weight: 700;">猜你喜欢</view>
			<uni-data-checkbox v-model="gender" :localdata="localGender" @change="genderChange" />
			<view style="font-size: 16px;font-weight: 700;" @click="search">
				<uni-icons type="bars"></uni-icons>
				<text>筛选</text>
			</view>
		</view>
		<unicloud-db ref="udbListRef" v-slot:default="{data, loading, error, options}" collection="uni-id-users"
			field="_id,nickname,baseInfo,avatar_file" :where="userwhere" @load="loadData" orderby="is_top desc, register_date desc"
			:page-size="20">
			<view class="active">
				<view class="u-box" v-for="(item,index) in data" :key='item._id' @click="navTo(item._id)">
					<image :src="item?.avatar_file?.url ||logo" mode="aspectFill" class="u-img"></image>
					<view class="section">
						<view class="s-title">{{item.nickname}} </view>
						<view style="font-size: 12px;">
							<view>
								<text>{{item?.baseInfo?.age}}岁 | </text>
								<text>{{item?.baseInfo?.height}}cm </text>
							</view>
							<view>{{getCity(item?.baseInfo?.city)}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadmore"></uni-load-more>
		</unicloud-db>
		
		
		<uni-popup ref="noticePop" type="center" :is-mask-click="false">
			<view class="box">
				<rich-text :nodes="notice_des"></rich-text>
				<uni-icons type="close" class="close" size="30" color="#ff0202"
					@click="$refs.noticePop.close()"></uni-icons>
			</view>
		</uni-popup>

		<!-- 猜你喜欢 筛选条件 -->
		<uni-popup ref="searchRef" type="bottom" background-color="#fff">
			<view style="background-color: #fff; padding: 5px 10px;">
				<view style="text-align: center;font-weight: 700;font-size: 16px;">
					寻找意中人
				</view>
				<uni-forms ref="formRef" :modelValue="form">
					<uni-forms-item label="所在地" name="city">
						<select-city v-model="form.city" ></select-city>
						<!-- <uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"
							field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"
							parent-field="parent_code" v-model="form.city" :border="false"></uni-data-picker> -->
					</uni-forms-item>
					<uni-forms-item label="性别" name="gender">
						<uni-data-checkbox v-model="form.gender" :localdata="localGender" @change="genderChange" />
					</uni-forms-item>
					<uni-forms-item label="年龄" name="zAge">
						<uni-data-picker :localdata="[...ages,{value:'不限',text:'不限'}]" popup-title="请选择"
							v-model="form.zAge" :border="false"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="身高" name="zHeight">
						<uni-data-picker :localdata="[...pHeight,{value:'不限',text:'不限'}]" popup-title="请选择"
							v-model="form.zHeight" :border="false"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="学历" name="zEdu">
						<uni-data-picker :localdata="[...edu,{value:'不限',text:'不限'}]" popup-title="请选择"
							v-model="form.zEdu" :border="false"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="收入" name="zInCome">
						<uni-data-picker :localdata="[...inCome,{value:'不限',text:'不限'}]" popup-title="请选择"
							v-model="form.zInCome" :border="false"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="婚况" name="zMar">
						<uni-data-picker :localdata="[...mar,{value:'不限',text:'不限'}]" v-model="form.zMar"
							popup-title="请选择" :border="false"></uni-data-picker>
					</uni-forms-item>
				</uni-forms>
				<view style="display: flex;justify-content: space-around;align-items: center;">
					<button type="default" size="mini" class="color" @click="cancel">取消</button>
					<button type="default" size="mini" class="color" @click="submit">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	const db = uniCloud.database();
	import logo from "@/static/logo.png"
	import {
		ref,
		watch,
		computed
	} from "vue"
	
	import { onReachBottom,onPageScroll } from "@dcloudio/uni-app"
	
	import WolfHeart from "@/components/wolf-heart/wolf-heart.vue"
	let now = new Date().getTime()
	import {
		useUserStore
	} from '@/pinia/user.js'
	const userStore = useUserStore()
	const girdList = [{
		bgcolor:"#e42f28",
		text:"寻找幸福",
		url:"/pages/basic-info/basic-info"
	},{
		bgcolor:"#2fa54d",
		text:"分享幸福",
		url:"/pages/share/share"
	},{
		bgcolor:"#962cf0",
		text:"幸福启航",
		url:"/pages/user/user"
	},{
		bgcolor:"#e42f28",
		text:"王者榜单",
		url:"/pages/gift/gift"
	},{
		bgcolor:"#2fa54d",
		text:"读书签到",
		url:"/pages/book/sort"
	},{
		bgcolor:"#962cf0",
		text:"服务套餐",
		url:"/pages/project/project"
	}]
	// let isShow = useUserStore().sysSetting.showGrid || false
	let isShow = computed(() => {
		return userStore.sysSetting.showGrid || false
	})
	console.log("now++", isShow)
	let bwhere = ref(`status == 1 && category_id == '0'`)
	let awhere = ref(`status == 1 && category_id == '1'`)
	
	let udbListRef = ref() 
	let loadmore = ref('more')
	const loadData = (data,e) => {
		if(e){
			loadmore.value = "no-more"
		}else{
			loadmore.value = "more"
		}
		// console.log("data", data)
	}
	// console.log("onReachBottom",onReachBottom);
	onReachBottom(()=>{
		if(loadmore.value=="more"){
			udbListRef.value.loadMore()
		}
		console.log('加载更多');
	})
	// onPageScroll(()=>{
	// 	console.log("onPageScroll");
	// })
	//猜你喜欢
	let form = ref({})
	const ages = computed(() => {
		return userStore.sysSetting.ages.map((item, index) => ({
			value: index,
			text: item
		}))
	})
	const pHeight = computed(() => {
		return userStore.sysSetting.pHeight.map((item, index) => ({
			value: index,
			text: item
		}))
	})
	const edu = computed(() => {
		return userStore.sysSetting.edu.map((item, index) => ({
			value: index,
			text: item
		}))
	})
	const inCome = computed(() => {
		return userStore.sysSetting.inCome.map((item, index) => ({
			value: index,
			text: item
		}))
	})
	const mar = computed(() => {
		return userStore.sysSetting.mar.map((item, index) => ({
			value: index,
			text: item
		}))
	})
	let searchRef = ref(null)
	let gender = ref(2)
	if (userStore.userInfo.gender === 2) {
		gender.value = 1
	}
	const localGender = [{
		text: "男",
		value: 1
	}, {
		text: "女",
		value: 2
	}]
	const userwhere = ref(`baseInfo.mar!='' && baseInfo.mar!=null && gender == ${gender.value}`)
	const genderChange = (e) => {
		// console.log("e=======>", e.detail.value);
		gender.value = e.detail.value
		userwhere.value = `baseInfo.mar!='' && baseInfo.mar!=null && gender == ${gender.value}`
	}

	const search = () => {
		searchRef.value.open()
	}
	const cancel = () => {
		searchRef.value.close()
	}
	const submit = () => {
		// console.log("form",form.value);
		let arr = []
		if (form.value.city) {
			arr.push(`baseInfo.city.value == '${form.value.city}'`)
		}
		if (form.value.gender) {
			arr.push(`gender==${form.value.gender}`)
		}
		if ((form.value.zAge && form.value.zAge != '不限') || form.value.zAge === 0) {
			// console.log('ages==>',ages.value,form.value.zAge,ages.value[form.value.zAge]);
			let age = ages.value[form.value.zAge].text.split('-')
			arr.push(`baseInfo.age>=${age[0]} && baseInfo.age<${age[1]}`)
		}
		if ((form.value.zHeight && form.value.zHeight != '不限') || form.value.zHeight === 0) {
			let height = pHeight.value[form.value.zHeight].text.split('-')
			arr.push(`baseInfo.height>=${height[0]} && baseInfo.height<${height[1]}`)
		}
		if ((form.value.zEdu && form.value.zEdu != '不限') || form.value.zEdu === 0) {
			arr.push(`baseInfo.edu==${form.value.zEdu}`)
		}
		if ((form.value.zInCome && form.value.zInCome != '不限') || form.value.zInCome === 0) {
			arr.push(`baseInfo.inCome==${form.value.zInCome}`)
		}
		if ((form.value.zMar && form.value.zMar != '不限') || form.value.zMar === 0) {
			arr.push(`baseInfo.mar==${form.value.zMar}`)
		}
		if (!((form.value.zMar && form.value.zMar != '不限') || form.value.zMar === 0)) {
			arr.push(`baseInfo.mar!='' && baseInfo.mar!=null`)
		}

		console.log("arr======>>>>>>>>>", arr);
		userwhere.value = arr.join('&&')
		setTimeout(() => {
			cancel()
		}, 500)
	}



	const getCity = (city) => {
		let str = ''
		if (city && city?.length > 0) {
			str = city.map(item => item.text).join('-')
		}
		return str
	}
	const navTo = (id) => {
		let url = `/pages/list/userInfo?id=${id}`
		uni.navigateTo({
			url
		})
	}


	let notice_des = ref('')
	const noticePop = ref()
	db.collection("wolf-notice").where('status == 1').get().then(res => {
		if (res.result.data.length > 0) {
			notice_des.value = res.result.data[0].des
		}
	})
	watch(() => notice_des.value, (val) => {
		if (val) {
			noticePop.value.open()
		}
	})

	const getLoveLine = async () => {
		if(!useUserStore().hasLogin){
			return uni.showModal({
				confirmText:"去登录",
				title:"提示",
				content:'您还没有登录',
				success: (res) => {
					if(res.confirm){
						uni.navigateTo({
							url:"/uni_modules/uni-id-pages/pages/login/login-withoutpwd"
						})
					}
				}
			})
		}
		let res = await db.collection("wolf-love-line").where(`hid == '${useUserStore().userInfo._id}'`).count()
		console.log("res", res.result.total)
		if (res.result.total > 0) {
			uni.showModal({
				confirmText: "查看",
				title: "提示",
				content: `有${res.result.total}人在关注我`,
				success(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/list/love-line'
						})
					}
				}
			})
		}
	}
	getLoveLine()
</script>